<template>
  <view class="goods-detail">
    <view class="goods-detail-top">
      <uni-nav-bar
        :fixed="true"
        :border="false"
        :statusBar="true"
        backgroundColor="transparent"
        @clickLeft="handleBack"
        v-if="type !== 'share'"
      >
        <template #left>
          <image class="goods-detail-navbar-left" src="/static/images/ic_back.png"></image>
        </template>
        <template #right>
          <image
            @click="shareClick"
            class="goods-detail-navbar-right"
            src="/static/images/ic_share.png"
          ></image>
        </template>
      </uni-nav-bar>
      <swiper class="goods-detail-swiper" circular :autoplay="true" :interval="5000">
        <swiper-item v-for="(imgUrl, index) in goodsInfo.carouselUrls" :key="index">
          <image class="goods-detail-swiper-item" :src="imgUrl" />
        </swiper-item>
      </swiper>
    </view>
    <view class="goods-detail-price-name-intro">
      <view class="goods-detail-price">
        <span class="goods-detail-price-0">¥</span>
        <span class="goods-detail-price-1">{{ goodsInfo.sellingPrice }}</span>
        <span class="goods-detail-price-2">¥{{ goodsInfo.originalPrice }}</span>
      </view>
      <view class="goods-detail-name">
        {{ goodsInfo.goodsName }}
      </view>
      <view class="goods-detail-intro">
        {{ goodsInfo.goodsIntro }}
      </view>
    </view>
    <view class="goods-detail-richtext" v-if="goodsInfo.goodsDetailContent">
      <mp-html :content="goodsInfo.goodsDetailContent" />
    </view>
    <view class="goods-detail-bottom">
      <view class="goods-detail-bottom-btn-member" @click="bugClick">立即购买 </view>
    </view>

    <uni-popup ref="buyNowRef" :isMaskClick="false" background-color="#fff">
      <BugNow
        v-if="hasGoods"
        :goodsInfo="goodsInfo"
        @selectSpecs="selectSpecClick"
        @cancel="closePopupClick"
        @bugNow="buyNowClick"
      ></BugNow>
    </uni-popup>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app';

  import { getGoods } from '@/api/goods.js';

  import { goBack, toPage } from '@/utils/app';

  import BugNow from '@/pages/goods/components/BugNow.vue';

  import { useUserInfoStore } from '@/stores/user';
  const userInfoStore = useUserInfoStore();

  const handleBack = () => {
    goBack();
  };

  const goodsId = ref();
  onLoad((option) => {
    goodsId.value = option.goodsId;
  });

  onMounted(() => {
    getGoodsReq();
  });

  const hasGoods = ref(false);
  const goodsInfo = ref({});
  const getGoodsReq = async () => {
    const res = await getGoods(goodsId.value);
    const data = res.data || {};
    const carouselUrls = [];
    if (data.goodsCarousel) {
      const ss = data.goodsCarousel.split(',');
      ss.forEach((s) => {
        carouselUrls.push(s);
      });
    }
    data['carouselUrls'] = carouselUrls;
    goodsInfo.value = data;
    hasGoods.value = true;
  };

  const buyNowRef = ref(null);
  const bugClick = () => {
    if (!userInfoStore.userId || userInfoStore.userId === 0 || userInfoStore.userId === '0') {
      toPage('/pages/user/wxLogin');
    } else {
      buyNowRef.value.open('bottom');
    }
  };

  const closePopupClick = () => {
    buyNowRef.value.close();
  };

  const buyNowClick = (goods) => {
    buyNowRef.value.close();
    const params = encodeURIComponent(JSON.stringify(goods));
    //toPage('/pages/order/order-confirm?goodsId=' + goodsId.value);
    toPage(`/pages/order/order-confirm?params=${params}`);
  };

  const selectSpecClick = (item) => {
    goodsInfo.specsId = item.id;
    goodsInfo.specsName = item.specsName
    goodsInfo.value.sellingPrice = item.specsPrice;
    goodsInfo.value.originalPrice = item.specsOriginPrice;
  };
</script>

<style scoped lang="scss">
  .goods-detail {
    display: flex;
    flex-direction: column;
    padding-bottom: 160rpx;

    .goods-detail-top {
      position: relative;
      width: 750rpx;
      height: 750rpx;
      background: #eeeeee;
      background-position: 0% 0%;
      background-size: 100% 100%;

      .goods-detail-navbar-left {
        width: 56rpx;
        height: 56rpx;
      }

      .goods-detail-navbar-right {
        width: 56rpx;
        height: 56rpx;
      }

      .goods-detail-swiper {
        position: absolute;
        top: 0px;
        left: 0;
        right: 0;
        width: 750rpx;
        height: 750rpx;

        .goods-detail-swiper-item {
          width: 750rpx;
          height: 750rpx;
        }
      }
    }

    .goods-detail-price-name-intro {
      margin: 24rpx 24rpx 0rpx 24rpx;
      padding: 24rpx;
      border-radius: 16rpx;
      background: #ffffff;

      .goods-detail-price {
        display: flex;
        align-items: flex-end;

        .goods-detail-price-0 {
          color: #c61323;
          font-family: DINPro;
          font-weight: 500;
          font-size: 24rpx;
          margin-bottom: 10rpx;
        }

        .goods-detail-price-1 {
          margin: 0 4rpx;
          color: #c61323;
          font-family: DINPro;
          font-weight: 500;
          font-size: 56rpx;
        }

        .goods-detail-price-2 {
          color: #a0a0b3;
          font-family: DINPro;
          font-weight: 500;
          font-size: 24rpx;
          text-decoration: line-through;
          margin-bottom: 10rpx;
        }
      }

      .goods-detail-name {
        margin-top: 16rpx;
        color: #1d2129;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        line-height: 48rpx;
      }

      .goods-detail-intro {
        margin-top: 16rpx;
        color: #545567;
        font-family: PingFang SC;
        font-size: 24rpx;
        line-height: 36rpx;
      }
    }

    .goods-detail-richtext {
      margin: 24rpx 24rpx 0rpx 24rpx;
      padding: 24rpx;
      border-radius: 16rpx;
      background: #ffffff;
    }

    .goods-detail-bottom {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
      padding: 16rpx 32rpx;
      background: #ffffff;
      box-shadow: 0rpx -8rpx 20rpx #949fb30d;

      .goods-detail-bottom-btn-member {
        width: 686rpx;
        height: 88rpx;
        border-radius: 24rpx;
        background: linear-gradient(138.98deg, #cb3d3d 0.5%, #a11012 100.24%);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
      }
    }
  }
</style>
